<template>
  <div id="app">
    <!-- 登录页面不显示导航栏 -->
    <template v-if="!isLoginPage">
      <!-- 顶部导航栏 -->
      <el-header class="app-header">
        <div class="header-content">
          <div class="header-left">
            <h1 class="app-title" @click="$router.push('/')">图书管理系统</h1>
            <el-menu
              mode="horizontal"
              :default-active="$route.path"
              class="header-menu"
              router
            >
              <el-menu-item index="/">
                <el-icon><House /></el-icon>
                首页
              </el-menu-item>
              <el-menu-item index="/author">
                <el-icon><User /></el-icon>
                作者管理
              </el-menu-item>
              <el-menu-item index="/book">
                <el-icon><Reading /></el-icon>
                图书管理
              </el-menu-item>
              <el-menu-item index="/category">
                <el-icon><Collection /></el-icon>
                分类管理
              </el-menu-item>
              <el-menu-item index="/publisher">
                <el-icon><OfficeBuilding /></el-icon>
                出版社
              </el-menu-item>
              <el-menu-item index="/borrow">
                <el-icon><DocumentCopy /></el-icon>
                借阅管理
              </el-menu-item>
              <el-menu-item index="/log">
                <el-icon><Document /></el-icon>
                操作日志
              </el-menu-item>
            </el-menu>
          </div>
          
          <div class="header-right">
            <!-- 用户信息 -->
            <el-dropdown @command="handleUserCommand">
              <div class="user-info">
                <el-avatar 
                  :size="32" 
                  :src="currentUser?.avatar"
                  :icon="UserFilled"
                />
                <span class="username">{{ currentUser?.realName || currentUser?.username }}</span>
                <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>
                    个人资料
                  </el-dropdown-item>
                  <el-dropdown-item command="setting">
                    <el-icon><Setting /></el-icon>
                    系统设置
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout">
                    <el-icon><SwitchButton /></el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <!-- 主要内容区域 -->
      <el-main class="app-main">
        <router-view />
      </el-main>
    </template>
    
    <!-- 登录页面 -->
    <template v-else>
      <router-view />
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  User, 
  UserFilled, 
  House, 
  Reading, 
  Collection, 
  OfficeBuilding, 
  DocumentCopy,
  Document,
  ArrowDown,
  Setting,
  SwitchButton
} from '@element-plus/icons-vue'
import { getUser, clearAuth } from '@/utils/auth'
import userApi from '@/api/user'

const router = useRouter()
const route = useRoute()

// 当前用户信息
const currentUser = computed(() => getUser())

// 是否为登录页面
const isLoginPage = computed(() => route.path === '/login')

// 处理用户下拉菜单命令
const handleUserCommand = async (command) => {
  switch (command) {
    case 'profile':
      ElMessage.info('个人资料功能开发中')
      break
    case 'setting':
      ElMessage.info('系统设置功能开发中')
      break
    case 'logout':
      await handleLogout()
      break
  }
}

// 处理退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要退出登录吗？',
      '退出确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 调用退出登录接口
    try {
      await userApi.logout(currentUser.value?.username)
    } catch (error) {
      // 即使接口调用失败，也要清除本地认证信息
      console.warn('退出登录接口调用失败:', error)
    }
    
    // 清除认证信息
    clearAuth()
    
    ElMessage.success('退出登录成功')
    
    // 跳转到登录页
    router.push('/login')
  } catch (error) {
    // 用户取消退出
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0;
  height: 60px;
  line-height: 60px;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 40px;
}

.app-title {
  color: #409eff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  cursor: pointer;
  transition: color 0.3s;
}

.app-title:hover {
  color: #66b1ff;
}

.header-menu {
  border-bottom: none;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: rgba(64, 158, 255, 0.1);
}

.username {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.dropdown-icon {
  font-size: 12px;
  color: #909399;
  transition: transform 0.3s;
}

.user-info:hover .dropdown-icon {
  transform: rotate(180deg);
}

.app-main {
  flex: 1;
  padding: 0;
  background-color: #f5f5f5;
}

/* Element Plus 样式覆盖 */
.el-header {
  padding: 0;
}

.el-main {
  padding: 0;
}
</style>
